<script setup>
import { reactive } from 'vue'
import useViewEvent from '@/core/hooks/useViewEvent'
import memberApi from '@/api/customer/MemberApi'

const state = reactive({ 
  visible: false,  
  loading: false, // 加载开关
  activeKey: ''
})
// 表单结构
const original = {
  id: '',
  customerNo: '',
  petName: '',
  avatar: '',
  mobile: '',
  email: '',
  grade: null,
  joinOn: ''
}
// 表单数据
const formState = reactive({})

// 初始化数据
const { InitializeData } = useViewEvent({state: state, remoteFetchData: memberApi.getFormModelById, formState: formState, original: original })

//向父组件暴露方法和属性
defineExpose({ InitializeData })
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`查看会员信息`"
    placement="right"
    :width="'50%'">
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card hoverable>
      <a-spin :spinning="state.loading">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="加入时间" :span="2">{{ formState.joinOn }} </a-descriptions-item>
          <a-descriptions-item label="会员号">{{ formState.customerNo }} - {{ formState.grade.label }}</a-descriptions-item>
          <a-descriptions-item label="名称">{{ formState.petName }}</a-descriptions-item>
          <a-descriptions-item label="手机号">{{ formState.mobile }}</a-descriptions-item>
          <a-descriptions-item label="邮件">{{ formState.email }}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ formState.notes }}</a-descriptions-item>
        </a-descriptions>
        <!-- -->
      </a-spin>
    </a-card>
    <a-tabs v-model:activeKey="state.activeKey" centered>
      <a-tab-pane key="1" tab="用户信息">用户信息</a-tab-pane>
      <a-tab-pane key="2" tab="消费记录" force-render>消费记录</a-tab-pane>
      <a-tab-pane key="3" tab="积分明细">积分明细</a-tab-pane>
      <a-tab-pane key="4" tab="签到记录">签到记录</a-tab-pane>
      <a-tab-pane key="5" tab="持有优惠券">持有优惠券</a-tab-pane>
      <a-tab-pane key="6" tab="余额变动">余额变动</a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>